User management UI #5793

lovincyrus · 2024-09-27T00:10:04Z

This PR contains the initial version of user management. Users can now add new users, view pending invites and remove users all in the cloud. Scoped out usergroup management changes for follow-up.

New components: Avatar, AvatarCircleList, Combobox, BasicTable

https://www.notion.so/rilldata/Dev-Notes-10dba33c8f578038a199f257639c577e

https://www.notion.so/rilldata/User-Management-UI-8d331b29d9b64d87bca066e06ef87f54

https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL-Latest?node-id=16418-864914&node-type=frame&t=4877tB4jsjaLhZeO-0

User management

CleanShot.2024-09-27.at.10.17.23.mp4

User groups management

CleanShot.2024-09-26.at.17.03.23.mp4

Users with pending invites

CleanShot.2024-09-27.at.11.59.40.mp4

lovincyrus · 2024-10-04T00:17:30Z

The org settings page will be released together with these changes. cc: @AdityaHegde

web-admin/src/routes/[organization]/-/users/+page.svelte

ericpgreen2

Much needed functionality! Overall, this is great. Here's the start of a review.

UXQA:

For consistency with the Project page's sub-pages, I'd wouldn't expect to see the horizontal line separating the header's top & bottom rows:
Every time I go to the user page, my Avatar is a different color
What's the effect of setting an Org's description? If there is an effect, can we say so in subtext? If there isn't one, can we remove it?
When I create an email pill, clicking "Invite" to submit the form adds an extra line in the text box as a side effect. Jam.
I noticed that Viewers are unable to see the Users page. They should also be able to see some read-only version of the table, so they can know who their teammates are (especially who are the Admins). This could go in a follow-on PR.
I didn't realize that these Role cells had dropdown menus until I hovered over them. Is there supposed to be a border around each role?

scripts/tsc-with-whitelist.sh

web-common/src/components/button/Button.svelte

lovincyrus · 2024-10-07T23:36:31Z

For consistency with the Project page's sub-pages, I'd wouldn't expect to see the horizontal line separating the header's top & bottom rows:

I'm afraid I don't have context for this. This was previously implemented in #5458 and the changeset of this PR uncomments the changes.

Can you confirm if this is the correct behavior of the horizontal line? @jkhwu

CleanShot.2024-10-07.at.16.34.57.mp4

lovincyrus · 2024-10-07T23:36:56Z

2. Every time I go to the user page, my Avatar is a different color

This is intentional.

lovincyrus · 2024-10-07T23:39:03Z

3. What's the effect of setting an Org's description? If there is an effect, can we say so in subtext? If there isn't one, can we remove it?

This is also a changeset from #5458

https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL-Latest?node-id=11202-427942&node-type=frame&t=WjZyoufpATOEltFj-0

Should we remove the org description? @jkhwu

lovincyrus · 2024-10-07T23:41:38Z

6. I didn't realize that these Role cells had dropdown menus until I hovered over them. Is there supposed to be a border around each role?

A chevron icon will be added for this!

jkhwu · 2024-10-08T01:13:57Z

Should we remove the org description?

I believe we included org description because it can be set in the CLI, but I'm not sure. If it's not a CLI function I'm pretty sure we can remove it, but if it is, I'll defer on whether it's ok to remove to @ericokuma

Can you confirm if this is the correct behavior of the horizontal line?

Confirming that we intended for there to only be one horizontal divider, underneath the tabs if there are tabs to display (for viewers they may only see that line under the top header. This is as shown in the mocks.

Every time I go to the user page, my Avatar is a different color.

My expectation would be that color assignment to each user is randomized, but that once assigned, that color stays with the user (until some future day when we allow users to sub in custom pics, or we just use their Google one)

eokuma · 2024-10-08T15:33:59Z

Every time I go to the user page, my Avatar is a different color

This is intentional.

Oh, I would also expect the avatar color to be the same each time

eokuma · 2024-10-08T15:36:58Z

Should we remove the org description?
I believe we included org description because it can be set in the CLI, but I'm not sure. If it's not a CLI function I'm pretty sure we can remove it, but if it is, I'll defer on whether it's ok to remove to @ericokuma

Can you confirm if this is the correct behavior of the horizontal line?
Confirming that we intended for there to only be one horizontal divider, underneath the tabs if there are tabs to display (for viewers they may only see that line under the top header. This is as shown in the mocks.

Every time I go to the user page, my Avatar is a different color.
My expectation would be that color assignment to each user is randomized, but that once assigned, that color stays with the user (until some future day when we allow users to sub in custom pics, or we just use their Google one)

I agree with all the above.

Also we can remove description (though we designed it because it is part of the CLI function). @ericpgreen2, what's your concern with having a description field?

lovincyrus · 2024-10-08T16:00:57Z

Every time I go to the user page, my Avatar is a different color

This is intentional.

Oh, I would also expect the avatar color to be the same each time

To persist a color, we'd need to add a new field to User so the returning user will always have a persistent color. Is that what we want to take on? cc: @ericpgreen2

ericpgreen2 · 2024-10-08T18:14:56Z

To persist a color, we'd need to add a new field to User so the returning user will always have a persistent color. Is that what we want to take on? cc: @ericpgreen2

Simpler, we could deterministically select a color client-side based on the user name or email.

ericpgreen2 · 2024-10-08T18:15:41Z

Also we can remove description (though we designed it because it is part of the CLI function). @ericpgreen2, what's your concern with having a description field?

No concern with the description field, just thought we could hide it for now if it's not used anywhere yet.

lovincyrus · 2024-10-08T19:39:33Z

To persist a color, we'd need to add a new field to User so the returning user will always have a persistent color. Is that what we want to take on? cc: @ericpgreen2

Simpler, we could deterministically select a color client-side based on the user name or email.

Sure, we can do that.

lovincyrus · 2024-10-08T19:51:58Z

Also we can remove description (though we designed it because it is part of the CLI function). @ericpgreen2, what's your concern with having a description field?

No concern with the description field, just thought we could hide it for now if it's not used anywhere yet.

Removed

eokuma · 2024-10-08T20:56:04Z

Also we can remove description (though we designed it because it is part of the CLI function). @ericpgreen2, what's your concern with having a description field?

No concern with the description field, just thought we could hide it for now if it's not used anywhere yet.

Removed

Sorry Cyrus, Eric, Janet, and I synced, and we decided to keep the description field

resolved

ericpgreen2

LGTM! Left some code comments & here are some UXQA items:

The Avatar is using a random color in favor of my Google avatar.
The users table is not showing users directly added to a project (but if this is meant for a follow-on PR, that's ok)

scripts/tsc-with-whitelist.sh

web-common/src/components/button/Button.svelte

web-common/src/features/models/splits/tanstack-table-column-meta.ts

web-common/src/components/avatar/Avatar.svelte

web-admin/src/routes/[organization]/-/users/+page.svelte

ericpgreen2 · 2024-10-10T23:03:10Z

web-admin/src/features/organizations/users/AvatarCircleList.svelte

Naming nit: I'm not sure I follow what makes this a "List"

web-admin/src/routes/[organization]/-/users/groups/+page.svelte

web-common/src/components/table/BasicTable.svelte

This reverts commit e18a898.

This reverts commit 4a5418e.

This reverts commit 3e4d6e2.

* clean up org tabs * org users table * user groups * capitalize * delete user group action * fix user group deletion * rerender * class tweaks * add basic table component * apply basic table to project resources table * set user group role * add then set role for user group * conditional item or checkbox item based on role * revoke user group role * bug fix * rename user group dialog * rework forms in user group dialogs * user composite cell * lint * lint * lint * add user to org * remove user from org * fix disabled * add avatar component * set role for org member user * lint * disallow current user to change role or remove themselves * show org invites * fix interface * add member to user group * allow adding user to user group for verified users * organize dialog footer actions * add users to usergroup * wip before edit user group dialog * pending invite copy * update user round for avatar placeholder when no alt * allow add to group for current user * edit user group dialog, remove user from group * lint * remove rename user group dialog * polish user group member users list * pass current user email down * update copy * org groups table role cell, set or update role * clean up * org users table role cell * lint * rework add users * lint * basic table tweaks, widthPercent addition * lint * search in users table, empty text * search in groups table * nit * lint * clean up, hide remove for all-users * lint * pre combobox * use combobox, search and add users in create group dialog * remove unused, clean up for all-users group * lint * ability to add users to usergroup in edit group dialog * remove adding users to usergroup in create group dialog * add avatar circle list, polish typeahead * lint * filter out users that are already in the group * lint * danger text for remove text button * clean up * fix input styles in combobox * remove unused * try * lint * bump typecheck nonsvelte files * add scrollable table config, random color wip * comment * clean up * clean up * clean up * scope out usergroup changes * comment * remove collaborator role option * use random color, non-gray, non-primary-secondary * clean up * Revert "bump typecheck nonsvelte files" This reverts commit e18a898. * add chevron to role change * Reapply "bump typecheck nonsvelte files" This reverts commit 4a5418e. * horizontal line feedback * lint * text danger * deterministic bg color client side * comment out desc from settings * noop comment * Revert "comment out desc from settings" This reverts commit 3e4d6e2. * feedback * update src alt conditionals from avatar * feedback * fix rebase * avoid prop drilling, feedback

lovincyrus force-pushed the cyrus/user-management-ui branch 2 times, most recently from 9607a0b to 7c87407 Compare October 3, 2024 18:02

lovincyrus changed the title ~~User and user group management UI~~ User management UI Oct 3, 2024

lovincyrus requested review from AdityaHegde and ericpgreen2 October 4, 2024 00:15

lovincyrus commented Oct 4, 2024

View reviewed changes

web-admin/src/routes/[organization]/-/users/+page.svelte Outdated Show resolved Hide resolved

ericpgreen2 previously requested changes Oct 7, 2024

View reviewed changes

scripts/tsc-with-whitelist.sh Outdated Show resolved Hide resolved

web-common/src/components/button/Button.svelte Outdated Show resolved Hide resolved

lovincyrus force-pushed the cyrus/user-management-ui branch from 6568c7a to 4a5418e Compare October 7, 2024 23:42

lovincyrus requested a review from ericpgreen2 October 8, 2024 19:47

lovincyrus mentioned this pull request Oct 9, 2024

Share Project Popover #5868

Closed

2 tasks

ericpgreen2 approved these changes Oct 10, 2024

View reviewed changes

lovincyrus added 4 commits October 11, 2024 10:02

clean up org tabs

59f4f9d

org users table

cd0f48c

user groups

0e091f1

capitalize

ed9ab6c

lovincyrus added 20 commits October 11, 2024 10:04

add scrollable table config, random color wip

dced8a7

comment

8f1d963

clean up

9b58bb7

clean up

c33dd80

clean up

9c50c19

scope out usergroup changes

5737505

comment

bc1b6ac

remove collaborator role option

9f77ae4

use random color, non-gray, non-primary-secondary

ea657d1

clean up

b88aa25

Revert "bump typecheck nonsvelte files"

b4d3bb0

This reverts commit e18a898.

add chevron to role change

094b558

Reapply "bump typecheck nonsvelte files"

df4845e

This reverts commit 4a5418e.

horizontal line feedback

3412c43

lint

ae2f7e6

text danger

c93683f

deterministic bg color client side

1425285

comment out desc from settings

ad36018

noop comment

ca0f662

Revert "comment out desc from settings"

4a6764e

This reverts commit 3e4d6e2.

lovincyrus force-pushed the cyrus/user-management-ui branch from d4c7477 to 4a6764e Compare October 11, 2024 17:04

lovincyrus added 5 commits October 11, 2024 10:15

feedback

a3a6603

update src alt conditionals from avatar

9cfebb5

feedback

dc81139

fix rebase

f18abca

avoid prop drilling, feedback

2245fd5

lovincyrus merged commit 756095f into main Oct 11, 2024
4 checks passed

lovincyrus deleted the cyrus/user-management-ui branch October 11, 2024 18:09

lovincyrus mentioned this pull request Oct 11, 2024

Share Project Popover #5887

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

User management UI #5793

User management UI #5793

lovincyrus commented Sep 27, 2024 •

edited

Loading

lovincyrus commented Oct 4, 2024

ericpgreen2 left a comment •

edited

Loading

lovincyrus commented Oct 7, 2024

lovincyrus commented Oct 7, 2024

lovincyrus commented Oct 7, 2024

lovincyrus commented Oct 7, 2024

jkhwu commented Oct 8, 2024 •

edited

Loading

eokuma commented Oct 8, 2024

eokuma commented Oct 8, 2024 •

edited

Loading

lovincyrus commented Oct 8, 2024

ericpgreen2 commented Oct 8, 2024

ericpgreen2 commented Oct 8, 2024

lovincyrus commented Oct 8, 2024

lovincyrus commented Oct 8, 2024

eokuma commented Oct 8, 2024

ericpgreen2 left a comment

ericpgreen2 Oct 10, 2024

User management UI #5793

User management UI #5793

Conversation

lovincyrus commented Sep 27, 2024 • edited Loading

lovincyrus commented Oct 4, 2024

ericpgreen2 left a comment • edited Loading

Choose a reason for hiding this comment

lovincyrus commented Oct 7, 2024

lovincyrus commented Oct 7, 2024

lovincyrus commented Oct 7, 2024

lovincyrus commented Oct 7, 2024

jkhwu commented Oct 8, 2024 • edited Loading

eokuma commented Oct 8, 2024

eokuma commented Oct 8, 2024 • edited Loading

lovincyrus commented Oct 8, 2024

ericpgreen2 commented Oct 8, 2024

ericpgreen2 commented Oct 8, 2024

lovincyrus commented Oct 8, 2024

lovincyrus commented Oct 8, 2024

eokuma commented Oct 8, 2024

ericpgreen2 left a comment

Choose a reason for hiding this comment

ericpgreen2 Oct 10, 2024

Choose a reason for hiding this comment

lovincyrus commented Sep 27, 2024 •

edited

Loading

ericpgreen2 left a comment •

edited

Loading

jkhwu commented Oct 8, 2024 •

edited

Loading

eokuma commented Oct 8, 2024 •

edited

Loading